import Loading from "@/components/loading";
import { TOKEN_NAME } from "@/config";
import { getStorage } from "@/utils/utils";
import { Content } from "antd/es/layout/layout";
import { Suspense } from "react";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { CSSTransition, SwitchTransition } from "react-transition-group";

const Main: React.FC = (props: any) => {
  const {} = props;
  const location = useLocation();
  return (
    <>
      {getStorage(TOKEN_NAME) ? (
        <Suspense fallback={<Loading />}>
          <SwitchTransition mode="out-in">
            <CSSTransition
              timeout={300}
              classNames="dg"
              unmountOnExit
              key={location.pathname}
            >
              <Content
                style={{
                  margin: "24px 24px 0",
                  padding: 24,
                  background: "#fff",
                  overflow: "auto",
                }}
                className="zdy_scrollbar"
              >
                {<Outlet />}
              </Content>
            </CSSTransition>
          </SwitchTransition>
        </Suspense>
      ) : (
        <Navigate
          to={`/login?redirect=${location.pathname}`}
          replace
        ></Navigate>
      )}
    </>
  );
};

export default Main;
